<!-- 
  Vuex 状态管理器
    概念：
      统一存放状态（会变化的数据）的东西。
    一个核心
      store - 仓库
    五大配置
      state
      getter
      mutation
      action
      module
    版本：
      Vuex@4    => Vue@3
      Vuex@3    => Vue@2

  1. state 的数据如何拿到组件中使用
    1. 直接使用 this.$store 实例属性，它的值就是 createStore 创建的 store
    2. 通过 计算属性 来使用
    3. 通过 计算属性 + mapState 辅助函数 来使用
        mapState() 映射 store 的 state 数据到组件上
        
        mapState(["count1", 'msg']),
        {
          count1() {
            return this.$store.state.count1
          },
          msg() {
            return this.$store.state.msg
          }
        }

  2. 组件如何去修改 store 的数据。
    步骤：
      1. store 中需要定义修改 state 数据的 方法（mutation）
      2. 组件中来触发突变
    1. 直接使用 this.$store.commit() 来提交突变
      语法：
        this.$store.commit(mutationType, payload)
          1. mutationType - 就是突变的名字
          2. payload  - 可选的传递给突变的参数

 -->

<template>
  <div>
    <h1>App</h1>
    <World />
    <hr />
    <Hello />
    <hr />
    <!-- 1. 直接通过 this.$store.state.xxx -->
    <!-- <p>Count: {{ $store.state.count }}</p> -->
    <!-- 2. 通过 计算属性的方式 -->
    <p>Count: {{ abcd }}</p>
    <p>Count: {{ count }}</p>
    <p>Msg: {{ msg }}</p>
    <button @click="fn1">修改Count</button>

    <hr />

    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import Hello from "./components/Hello.vue";
import World from "./components/World.vue";
import { mapState } from "vuex";

export default {
  name: "App",

  // 局部注册组件
  components: {
    Hello,
    World,
    HelloWorld,
  },

  computed: {
    abcd() {
      return this.$store.state.count;
    },
    ...mapState(["count", "msg"]),
  },

  created() {
    console.log("this.$store", this.$store);
    console.log("count", this.$store.state.count); // 10
  },

  methods: {
    fn1() {
      this.$store.commit("set_count", 100);
    },
  },
};
</script>
